<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>右边定宽，左边自适应</title>
	<style type="text/css">	
		body{
			min-width: 500px;
		}	
		.wrapper{
			padding: 15px 20px;
			border: 1px solid #f60;
		}

		.left{
			margin-right: 20px;
			border: 5px solid #ddd;
		}

		.top-right,.bottom-right{
			width: 200px;
			border: 5px solid #ddd;
		}

		/******************两个都使用inline-block，左侧计算宽度**********************/
		.wrapper-inline-block .top-right{
			display: none;
		}

		.wrapper-inline-block{
			box-sizing: content-box;
			font-size: 0;	/*消除空格的影响*/
		}

		.wrapper-inline-block .left,.wrapper-inline-block .bottom-right{
			display: inline-block;
			vertical-align: top;	/*顶端对齐*/
			font-size: 14px;
			box-sizing: border-box;
		}

		.wrapper-inline-block .left{
			width: calc(100% - 225px);
		}

		/**************************左右都float，然后计算左侧的宽度***********************/
		.wrapper-double-float .top-right{
			display: none;
		}

		.wrapper-double-float{
			overflow: auto;
			box-sizing: content-box;
		}

		.wrapper-double-float .left,.wrapper-double-float .bottom-right{
			float: left;
			box-sizing: border-box;
		}

		.wrapper-double-float .left{
			width: calc(100% - 225px);
		}

		/********************左侧block，右侧float，左侧margin-right，需要清除浮动***********************/
		.wrapper-float .bottom-right{
			display: none;
		}

		.wrapper-float{
			overflow: hidden;	/*清除浮动*/
		}

		.wrapper-float .left{
			margin-right: 225px;
		}

		.wrapper-float .top-right{
			float: right;
		}

		/********************右侧float，设置margin-left，左侧应用BFC来消除与右侧的重叠**********************/
		.wrapper-float-bfc .bottom-right{
			display: none;
		}

		.wrapper-float-bfc{
			overflow: auto;
		}

		.wrapper-float-bfc .top-right{
			float: right;
			margin-left: 20px;
		}

		.wrapper-float-bfc .left{
			margin-right: 0;
			overflow: auto;
		}

		/*********************左侧position:absolute，右侧通过计算设置margin-right*************************/
		.wrapper-absolute .bottom-right{
			display: none;
		}

		.wrapper-absolute{
			position: relative;
		}

		.wrapper-absolute .top-right{
			position: absolute;
			right: 20px;
		}

		.wrapper-absolute .left{
			margin-right: 225px;
		}

		/***************************************flex****************************************/
		.wrapper-flex .top-right{
			display: none;
		}

		.wrapper-flex{
			display: flex;
			align-items: flex-start;
		}

		.wrapper-flex .bottom-right{
			flex: 0 0 auto;
		}

		.wrapper-flex .left{
			flex: 1 1 auto;
		}

		/*******************************************grid*************************************/
		.wrapper-grid .top-right{
			display: none;
		}

		.wrapper-grid{
			display: grid;
			grid-template-columns: 2fr 200px;
			align-items: start;
		}

		.wrapper-grid .left,.wrapper-grid .bottom-right{
			box-sizing: border-box;
		}

		.wrapper-grid .bottom-right{
			grid-column: 2;
		}

		.wrapper-grid .left{
			grid-column: 1;
		}
	</style>
</head>
<body>
	<!-- header -->
	<div class="header" style="width:100%; height: 60px; background-color: rgb(33,117,188); font-size: 25px">
		<div class="header-title" style="width: 70%; margin: 0 auto; line-height: 60px;">
			<a href="https://runcoderhang.github.io/" style="color: #fff; text-decoration: none;" target="_blank">Hang</a>
		</div>
	</div>
	<!-- 选择 select -->
	<div style="padding: 20px 20px;">
		<span class="form-control-static" style="color: #ff6c60;">选择不同的方案查看效果:</span>
		<select id="select">
			<option value="0">双inline-block方案</option>
			<option value="1">双float方案</option>
			<option value="2">float+margin-left方案</option>
			<option value="4">absolute+margin-left方案</option>
			<option value="3">float+BFC方案</option>
			<option value="5">flex方案</option>
			<option value="6">grid方案</option>
		</select>
	</div>
	<div style="padding: 20px;">
		<span style="color: #ff6c60;">选择左侧不同的高度:</span>
		<select name="" id="changeHeight">
			<option value="1">左侧很低</option>
			<option value="0">左侧很高</option>
		</select>
	</div>
	<!-- 主要内容：wrapper -->
	<div class="wrapper wrapper-inline-block" id="wrapper">
		<div class="top-right">
			我是右边div：<strong>top-right</strong><br><br>
			基本样式：两个div相距20px，右侧div宽200px<br><br><br><br><br>
		</div>
		<div class="left">
			我是左边div：<strong>left</strong><br>
			高度有可能会很小，也可能很大。<br>
			我是自适应。我是自适应。我是自适应。我是自适应。我是自适应。我是自适应。我是自适应。
			<br>
		</div>
		<div class="bottom-right">
			我是右边div：<strong>bottom-right</strong><br><br>
			基本样式：两个div相距20px，右侧div宽200px<br><br><br><br><br>
		</div>
	</div>
	<!-- footer -->
	<div class="footer" style="text-align: center;">
		<br><br>
		<p>感谢作者提供的案例，作为我的参考。<a href="https://zhuqingguang.github.io/vac-works/cssLayout/index1.html" target="_blank">左边定宽，右边自适应。</a></p>
		<p>segmentfault平台作者详解:<a href="https://segmentfault.com/a/1190000010698609" target="_blank">https://segmentfault.com/a/1190000010698609</a></p>
		<p>作者博客详解<a href="https://zhuqingguang.github.io/2017/08/16/adapting-two-layout/" target="_blank">https://zhuqingguang.github.io/2017/08/16/adapting-two-layout/</a></p>
	</div>

	<script>
		var wrapper = document.querySelector('#wrapper');
		document.querySelector('#select').addEventListener('change', function(event){
			var value = event.target.value
			switch (+value) {
				case 0: wrapper.className = 'wrapper wrapper-inline-block';
					break;
				case 1: wrapper.className = 'wrapper wrapper-double-float';
					break;
				case 2: wrapper.className = 'wrapper wrapper-float';
					break;
				case 3: wrapper.className = 'wrapper wrapper-float-bfc';
					break;
				case 4: wrapper.className = 'wrapper wrapper-absolute';
					break;
				case 5: wrapper.className = 'wrapper wrapper-flex';
					break;
				case 6: wrapper.className = 'wrapper wrapper-grid';
					break;
			}
		});

		var leftDiv = document.querySelector('.left');
		document.querySelector('#changeHeight').addEventListener('change', function(event) {
			var value = event.target.value
			switch (+value) {
				case 0: leftDiv.style.height = "700px";
					break;
				case 1: leftDiv.style.height = "auto";
					break;
			}
		});
	</script>
</body>
</html>
<!-- 
	左自适应，右定宽：	
		左div在上，右div在下： wrapper-inline-block , wrapper-double-float , wrapper-flex , wrapper-grid

		右div在上，左div在下： wrapper-float ,  wrapper-float-bfc , wrapper-absolute , 
	
-->